/**
 * 环境监测卡片组件
 * 显示实时环境数据的卡片
 */

<template>
  <div class="env-cards">
    <div class="env-cards-title">环境监测</div>
    <!-- 温度卡片 -->
    <div class="env-card temperature" @click="handleCardClick('temperature')">
      <div class="card-icon">🌡️</div>
      <div class="card-content">
        <div class="card-title">温度</div>
        <div class="card-value">{{ envData.temperature.toFixed(1) }}°C</div>
        <div class="card-trend" :class="getTrendClass('temperature')">
          <i class="trend-icon">{{ getTrendIcon('temperature') }}</i>
          <span class="trend-text">{{ getTrendText('temperature') }}</span>
        </div>
      </div>
      <div class="card-glow"></div>
    </div>

    <!-- 湿度卡片 -->
    <div class="env-card humidity" @click="handleCardClick('humidity')">
      <div class="card-icon">💧</div>
      <div class="card-content">
        <div class="card-title">湿度</div>
        <div class="card-value">{{ envData.humidity.toFixed(0) }}%</div>
        <div class="card-trend" :class="getTrendClass('humidity')">
          <i class="trend-icon">{{ getTrendIcon('humidity') }}</i>
          <span class="trend-text">{{ getTrendText('humidity') }}</span>
        </div>
      </div>
      <div class="card-glow"></div>
    </div>

    <!-- 空气质量卡片 -->
    <div class="env-card air-quality" @click="handleCardClick('airQuality')">
      <div class="card-icon">🍃</div>
      <div class="card-content">
        <div class="card-title">空气质量</div>
        <div class="card-value">{{ envData.airQuality.toFixed(0) }}</div>
        <div class="card-trend" :class="getTrendClass('airQuality')">
          <i class="trend-icon">{{ getTrendIcon('airQuality') }}</i>
          <span class="trend-text">{{ getTrendText('airQuality') }}</span>
        </div>
      </div>
      <div class="card-glow"></div>
    </div>

    <!-- 紫外线卡片 -->
    <div class="env-card uv-index" @click="handleCardClick('uvIndex')">
      <div class="card-icon">☀️</div>
      <div class="card-content">
        <div class="card-title">紫外线</div>
        <div class="card-value">{{ envData.uvIndex.toFixed(1) }}</div>
        <div class="card-trend" :class="getTrendClass('uvIndex')">
          <i class="trend-icon">{{ getTrendIcon('uvIndex') }}</i>
          <span class="trend-text">{{ getTrendText('uvIndex') }}</span>
        </div>
      </div>
      <div class="card-glow"></div>
    </div>

    <!-- 光感度卡片 - 隐藏 -->
    <!-- <div class="env-card light" @click="handleCardClick('lightIntensity')">
      <div class="card-icon">💡</div>
      <div class="card-content">
        <div class="card-title">光感度</div>
        <div class="card-value">{{ envData.lightIntensity.toFixed(0) }}lx</div>
        <div class="card-trend" :class="getTrendClass('lightIntensity')">
          <i class="trend-icon">{{ getTrendIcon('lightIntensity') }}</i>
          <span class="trend-text">{{ getTrendText('lightIntensity') }}</span>
        </div>
      </div>
      <div class="card-glow"></div>
    </div> -->

    <!-- 气压卡片 - 隐藏 -->
    <!-- <div class="env-card pressure" @click="handleCardClick('pressure')">
      <div class="card-icon">🌪️</div>
      <div class="card-content">
        <div class="card-title">气压</div>
        <div class="card-value">{{ envData.pressure.toFixed(1) }}hPa</div>
        <div class="card-trend" :class="getTrendClass('pressure')">
          <i class="trend-icon">{{ getTrendIcon('pressure') }}</i>
          <span class="trend-text">{{ getTrendText('pressure') }}</span>
        </div>
      </div>
      <div class="card-glow"></div>
    </div> -->
  </div>
</template>

<script setup lang="ts">
import type { EnvData } from '../types'

interface Props {
  envData: EnvData
}

interface Emits {
  (e: 'cardClick', type: keyof EnvData): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

/**
 * 处理卡片点击事件
 */
const handleCardClick = (type: keyof EnvData) => {
  emit('cardClick', type)
}

/**
 * 获取趋势样式类
 */
const getTrendClass = (type: keyof EnvData) => {
  const value = props.envData[type] as number
  // 简单的趋势判断逻辑
  if (type === 'temperature') {
    return value > 30 ? 'trend-up' : value < 18 ? 'trend-down' : 'trend-stable'
  }
  if (type === 'humidity') {
    return value > 70 ? 'trend-up' : value < 40 ? 'trend-down' : 'trend-stable'
  }
  if (type === 'airQuality') {
    return value > 80 ? 'trend-up' : value < 60 ? 'trend-down' : 'trend-stable'
  }
  return 'trend-stable'
}

/**
 * 获取趋势图标
 */
const getTrendIcon = (type: keyof EnvData) => {
  const trendClass = getTrendClass(type)
  return {
    'trend-up': '↗',
    'trend-down': '↘',
    'trend-stable': '→'
  }[trendClass] || '→'
}

/**
 * 获取趋势文本
 */
const getTrendText = (type: keyof EnvData) => {
  const trendClass = getTrendClass(type)
  return {
    'trend-up': '上升',
    'trend-down': '下降',
    'trend-stable': '稳定'
  }[trendClass] || '稳定'
}
</script>

<style scoped>
.env-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: max(0.8vw, 12px);
  height: 100%;
  position: relative;
  padding-top: 35px; /* 为标题留出空间 */
}

.env-cards-title {
  position: absolute;
  top: 10px;
  left: 10px;
  color: #00d4ff;
  font-size: 16px;
  font-weight: bold;
  z-index: 10;
}

.env-card {
  background: rgba(0, 212, 255, 0.1);
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: max(0.6vw, 8px);
  padding: max(1vw, 12px);
  display: flex;
  align-items: center;
  gap: max(0.8vw, 10px);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
}

.env-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 212, 255, 0.3);
}

.env-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.5s;
}

.env-card:hover::before {
  left: 100%;
}

.card-icon {
  font-size: max(1.6vw, 24px);
  filter: drop-shadow(0 0 10px rgba(0, 212, 255, 0.5));
}

.card-content {
  flex: 1;
}

.card-title {
  color: #00d4ff;
  font-size: max(0.7vw, 11px);
  margin-bottom: max(0.2vw, 3px);
}

.card-value {
  color: #fff;
  font-size: max(1vw, 14px);
  font-weight: bold;
  margin-bottom: max(0.2vw, 3px);
}

.card-trend {
  display: flex;
  align-items: center;
  gap: max(0.2vw, 3px);
  font-size: max(0.6vw, 10px);
}

.trend-icon {
  font-style: normal;
  font-size: 14px;
}

.trend-up {
  color: #ff6b6b;
}

.trend-down {
  color: #67e0e3;
}

.trend-stable {
  color: #ffd93d;
}

.card-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, transparent, rgba(0, 212, 255, 0.1));
  border-radius: 12px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.env-card:hover .card-glow {
  opacity: 1;
}

/* 特定卡片颜色 */
.env-card.temperature {
  border-color: rgba(255, 107, 107, 0.3);
  background: rgba(255, 107, 107, 0.1);
}

.env-card.humidity {
  border-color: rgba(103, 224, 227, 0.3);
  background: rgba(103, 224, 227, 0.1);
}

.env-card.air-quality {
  border-color: rgba(108, 92, 231, 0.3);
  background: rgba(108, 92, 231, 0.1);
}

.env-card.uv-index {
  border-color: rgba(255, 217, 61, 0.3);
  background: rgba(255, 217, 61, 0.1);
}

.env-card.light {
  border-color: rgba(253, 121, 168, 0.3);
  background: rgba(253, 121, 168, 0.1);
}

.env-card.pressure {
  border-color: rgba(255, 182, 77, 0.3);
  background: rgba(255, 182, 77, 0.1);
}
</style>
